<template>
    <div>
        <h1>公告修改</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>标题</td>
                    <td><input type="text" v-model="info.bname" /></td>
                </tr>  
                <tr>
                    <td>内容</td>
                    <td><input type="text" v-model="info.nei" /></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="getphoto" />
                        <img :src="info.phone" alt="" width="100" height="100">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" v-model="info.state" value="1" name="state" />是
                        <input type="radio" v-model="info.state" value="0" name="state" />否
                    </td>
                </tr>
                <tr>
                    <td>类型</td>
                    <td>
                        <select v-model="info.lid">
                            <option value="">请选择</option>
                            <option value=1>服务业务</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" class="btn btn-success" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const route=useRoute();
const router=useRouter();

const info=reactive({
    id:route.query.id,
    bname:'',
    nei:'',
    phone:'',
    state:1,
    lid:'',
})
//图片
const getphoto=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append("file",file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.phone=res.data;
    })
}

//钩子函数
onMounted(()=>{
    FanTian();
})
//反填
const FanTian=()=>{
    axios({
        url:'/api/Note/FanTian',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        info.bname=res.data.bname,
        info.nei=res.data.nei,
        info.phone=res.data.phone,
        info.state=res.data.state,
        info.lid=res.data.lid
    })
}

//修改
const ok=()=>{
    if(info.bname==""){
        alert('标题不能为空!');
        return;
    }
    if(info.bname.length>20){
        alert('标题必须在20字以内!')
    }
    if(info.nei==""){
        alert('内容不能为空!');
        return;
    }
    if(info.nei.length>50){
        alert('内容不能大于50!');
        return;
    }
    if(info.phone==""){
        alert('图片不能为空!');
        return;
    }
    if(info.lid==""){
        alert('类型不能为空!');
        return;
    }
    axios({
        url:'/api/Note/Update',
        method:'put',
        data:info
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功!');
            router.push('/NoteList');
        }
        else{
            alert('修改失败!');
        }
    })
}

</script>